<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火调报告生成 - 火灾调查知识库平台</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Element Plus -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
</head>
<body class="bg-gray-50">
    <div id="app">
        <!-- 顶部导航栏 -->
        <nav class="bg-white shadow-md">
            <div class="container mx-auto px-6 py-3">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <a href="index.html">
                            <img src="logo.png" alt="Logo" class="h-8 w-auto">
                        </a>
                        <span class="ml-3 text-xl font-semibold text-gray-800">火灾调查知识库平台</span>
                    </div>
                    <div class="flex items-center space-x-6">
                        <a href="search.html" class="nav-item"><i class="fas fa-search mr-1"></i>检索</a>
                        <a href="knowledge-graph.html" class="nav-item"><i class="fas fa-project-diagram mr-1"></i>火调知识图谱</a>
                        <a href="ai-search.html" class="nav-item"><i class="fas fa-robot mr-1"></i>AI检索功能</a>
                        <a href="report.html" class="nav-item active"><i class="fas fa-file-alt mr-1"></i>火调报告生成</a>
                        <a href="dashboard.html" class="nav-item"><i class="fas fa-tachometer-alt mr-1"></i>火调大模型驾驶舱</a>
                        <div class="border-l border-gray-300 h-6"></div>
                        <a href="profile.html" class="nav-item"><i class="fas fa-user mr-1"></i>个人中心</a>
                        <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700">登录</button>
                        <button class="px-4 py-2 text-sm font-medium text-blue-600 border border-blue-600 rounded-md hover:bg-blue-50">注册</button>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 主要内容区域 -->
        <main class="container mx-auto px-6 py-8">
            <!-- 步骤导航 -->
            <el-steps :active="activeStep" finish-status="success" class="mb-8">
                <el-step title="基本信息" description="填写火灾基本信息"></el-step>
                <el-step title="现场勘验" description="记录现场勘验信息"></el-step>
                <el-step title="人员询问" description="记录询问笔录"></el-step>
                <el-step title="物证分析" description="记录物证分析结果"></el-step>
                <el-step title="报告生成" description="生成调查报告"></el-step>
            </el-steps>

            <!-- 步骤内容 -->
            <div class="bg-white rounded-lg shadow-sm p-6">
                <!-- 基本信息 -->
                <div v-if="activeStep === 0">
                    <h3 class="text-lg font-semibold mb-6">火灾基本信息</h3>
                    <el-form :model="basicInfo" label-width="120px">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <el-form-item label="案件编号">
                                <el-input v-model="basicInfo.caseNumber" placeholder="请输入案件编号"></el-input>
                            </el-form-item>
                            <el-form-item label="火灾地点">
                                <el-cascader
                                    v-model="basicInfo.location"
                                    :options="locationOptions"
                                    placeholder="请选择火灾地点">
                                </el-cascader>
                            </el-form-item>
                            <el-form-item label="发生时间">
                                <el-date-picker
                                    v-model="basicInfo.time"
                                    type="datetime"
                                    placeholder="请选择发生时间">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="火灾类型">
                                <el-select v-model="basicInfo.type" placeholder="请选择火灾类型">
                                    <el-option label="电气火灾" value="electrical"></el-option>
                                    <el-option label="燃气火灾" value="gas"></el-option>
                                    <el-option label="化学品火灾" value="chemical"></el-option>
                                    <el-option label="森林火灾" value="forest"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <el-form-item label="事故概述">
                            <el-input type="textarea" v-model="basicInfo.description" rows="4" placeholder="请简要描述火灾事故情况"></el-input>
                        </el-form-item>
                    </el-form>
                </div>

                <!-- 现场勘验 -->
                <div v-if="activeStep === 1">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-lg font-semibold">现场勘验信息</h3>
                        <el-button type="primary" @click="openAIAssistant">
                            <i class="fas fa-robot mr-1"></i> AI勘验助手
                        </el-button>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- 现场照片上传 -->
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h4 class="font-medium mb-4">现场照片</h4>
                            <el-upload
                                class="upload-demo"
                                drag
                                action="https://api.example.com/upload"
                                multiple>
                                <i class="fas fa-cloud-upload-alt text-4xl text-gray-400"></i>
                                <div class="mt-2 text-gray-600">点击或拖拽文件到此处上传</div>
                            </el-upload>
                        </div>

                        <!-- 现场绘制 -->
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h4 class="font-medium mb-4">现场示意图</h4>
                            <div class="border-2 border-dashed border-gray-300 rounded-lg h-48 flex items-center justify-center">
                                <button class="text-blue-600 hover:text-blue-800">
                                    <i class="fas fa-pencil-alt mr-1"></i> 打开绘图工具
                                </button>
                            </div>
                        </div>

                        <!-- 现场描述 -->
                        <div class="md:col-span-2">
                            <el-form label-position="top">
                                <el-form-item label="现场勘验记录">
                                    <el-input type="textarea" rows="6" placeholder="请详细描述现场勘验情况，包括火灾痕迹、起火部位特征等"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>

                <!-- 人员询问 -->
                <div v-if="activeStep === 2">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-lg font-semibold">人员询问记录</h3>
                        <div class="space-x-4">
                            <el-button @click="generateQuestions">
                                <i class="fas fa-question-circle mr-1"></i> 生成询问提纲
                            </el-button>
                            <el-button type="primary" @click="addInterviewRecord">
                                <i class="fas fa-plus mr-1"></i> 新增询问记录
                            </el-button>
                        </div>
                    </div>

                    <!-- 询问记录列表 -->
                    <el-table :data="interviewRecords" style="width: 100%">
                        <el-table-column prop="time" label="询问时间" width="180"></el-table-column>
                        <el-table-column prop="name" label="被询问人" width="120"></el-table-column>
                        <el-table-column prop="role" label="身份" width="120"></el-table-column>
                        <el-table-column prop="content" label="主要内容"></el-table-column>
                        <el-table-column label="操作" width="150">
                            <template #default="scope">
                                <el-button type="text" size="small" @click="editRecord(scope.row)">编辑</el-button>
                                <el-button type="text" size="small" @click="viewRecord(scope.row)">查看</el-button>
                                <el-button type="text" size="small" @click="deleteRecord(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <!-- 物证分析 -->
                <div v-if="activeStep === 3">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-lg font-semibold">物证分析</h3>
                        <el-button-group>
                            <el-button @click="openExpertSystem">
                                <i class="fas fa-microscope mr-1"></i> 专家系统
                            </el-button>
                            <el-button @click="openLabSystem">
                                <i class="fas fa-flask mr-1"></i> 实验室系统
                            </el-button>
                        </el-button-group>
                    </div>

                    <!-- 物证列表 -->
                    <el-table :data="evidenceList" style="width: 100%" class="mb-6">
                        <el-table-column type="index" width="50"></el-table-column>
                        <el-table-column prop="name" label="物证名称" width="180"></el-table-column>
                        <el-table-column prop="type" label="类型" width="120"></el-table-column>
                        <el-table-column prop="location" label="采集位置" width="180"></el-table-column>
                        <el-table-column prop="status" label="检验状态" width="120">
                            <template #default="scope">
                                <el-tag :type="scope.row.status === '已完成' ? 'success' : 'warning'">
                                    {{ scope.row.status }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="result" label="检验结果"></el-table-column>
                        <el-table-column label="操作" width="150">
                            <template #default="scope">
                                <el-button type="text" size="small" @click="viewEvidence(scope.row)">查看</el-button>
                                <el-button type="text" size="small" @click="analyzeEvidence(scope.row)">分析</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!-- 分析结论 -->
                    <el-form label-position="top">
                        <el-form-item label="物证分析结论">
                            <el-input type="textarea" rows="4" placeholder="请输入物证分析的综合结论"></el-input>
                        </el-form-item>
                    </el-form>
                </div>

                <!-- 报告生成 -->
                <div v-if="activeStep === 4">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-lg font-semibold">火灾调查报告</h3>
                        <div class="space-x-4">
                            <el-button @click="previewReport">
                                <i class="fas fa-eye mr-1"></i> 预览
                            </el-button>
                            <el-button type="primary" @click="generateReport">
                                <i class="fas fa-file-export mr-1"></i> 生成报告
                            </el-button>
                        </div>
                    </div>

                    <!-- 报告模板选择 -->
                    <div class="mb-6">
                        <el-radio-group v-model="reportTemplate">
                            <el-radio-button label="standard">标准版</el-radio-button>
                            <el-radio-button label="detailed">详细版</el-radio-button>
                            <el-radio-button label="summary">简要版</el-radio-button>
                        </el-radio-group>
                    </div>

                    <!-- 报告预览 -->
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <div class="prose max-w-none">
                            <h1 class="text-center mb-8">火灾事故调查报告</h1>
                            <div class="mb-6">
                                <h2>一、基本情况</h2>
                                <p>{{ basicInfo.description }}</p>
                            </div>
                            <div class="mb-6">
                                <h2>二、现场勘验</h2>
                                <p>现场勘验记录内容...</p>
                            </div>
                            <div class="mb-6">
                                <h2>三、人员询问</h2>
                                <p>询问笔录概要...</p>
                            </div>
                            <div class="mb-6">
                                <h2>四、物证分析</h2>
                                <p>物证分析结果...</p>
                            </div>
                            <div class="mb-6">
                                <h2>五、事故原因分析</h2>
                                <p>根据调查结果分析...</p>
                            </div>
                            <div>
                                <h2>六、结论与建议</h2>
                                <p>调查结论及防范建议...</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 步骤控制按钮 -->
                <div class="flex justify-between mt-6">
                    <el-button @click="prevStep" :disabled="activeStep === 0">
                        <i class="fas fa-arrow-left mr-1"></i> 上一步
                    </el-button>
                    <el-button type="primary" @click="nextStep" :disabled="activeStep === 4">
                        下一步 <i class="fas fa-arrow-right ml-1"></i>
                    </el-button>
                </div>
            </div>
        </main>
    </div>

    <script>
        const { createApp, ref } = Vue
        const app = createApp({
            setup() {
                const activeStep = ref(0)
                const reportTemplate = ref('standard')

                // 基本信息
                const basicInfo = ref({
                    caseNumber: '',
                    location: [],
                    time: '',
                    type: '',
                    description: ''
                })

                // 地点选项
                const locationOptions = [
                    {
                        value: 'beijing',
                        label: '北京市',
                        children: [
                            {
                                value: 'chaoyang',
                                label: '朝阳区'
                            }
                        ]
                    }
                ]

                // 询问记录
                const interviewRecords = ref([
                    {
                        time: '2024-01-15 14:30',
                        name: '张三',
                        role: '目击证人',
                        content: '事故发生时的情况描述...'
                    }
                ])

                // 物证列表
                const evidenceList = ref([
                    {
                        name: '电线残骸',
                        type: '电气设备',
                        location: '起火点附近',
                        status: '已完成',
                        result: '存在短路痕迹'
                    }
                ])

                // 方法
                const nextStep = () => {
                    if (activeStep.value < 4) {
                        activeStep.value++
                    }
                }

                const prevStep = () => {
                    if (activeStep.value > 0) {
                        activeStep.value--
                    }
                }

                const openAIAssistant = () => {
                    console.log('打开AI助手')
                }

                const generateQuestions = () => {
                    console.log('生成询问提纲')
                }

                const addInterviewRecord = () => {
                    console.log('添加询问记录')
                }

                const editRecord = (row) => {
                    console.log('编辑记录', row)
                }

                const viewRecord = (row) => {
                    console.log('查看记录', row)
                }

                const deleteRecord = (row) => {
                    console.log('删除记录', row)
                }

                const openExpertSystem = () => {
                    console.log('打开专家系统')
                }

                const openLabSystem = () => {
                    console.log('打开实验室系统')
                }

                const viewEvidence = (row) => {
                    console.log('查看物证', row)
                }

                const analyzeEvidence = (row) => {
                    console.log('分析物证', row)
                }

                const previewReport = () => {
                    console.log('预览报告')
                }

                const generateReport = () => {
                    console.log('生成报告')
                }

                return {
                    activeStep,
                    reportTemplate,
                    basicInfo,
                    locationOptions,
                    interviewRecords,
                    evidenceList,
                    nextStep,
                    prevStep,
                    openAIAssistant,
                    generateQuestions,
                    addInterviewRecord,
                    editRecord,
                    viewRecord,
                    deleteRecord,
                    openExpertSystem,
                    openLabSystem,
                    viewEvidence,
                    analyzeEvidence,
                    previewReport,
                    generateReport
                }
            }
        })

        app.use(ElementPlus)
        app.mount('#app')
    </script>
</body>
</html> 